{% extends "base.html" %}

{% block title %}{{ SITENAME }} — {{ article.title }}{% endblock %}

{% block favicon %}{{ article.category }}.png{% endblock favicon %}

{% block body_class %}article {{ article.category }}{% if article.hide_inserted_links %} hide_inserted_links{% endif %}{% endblock %}

{% block head %}
{{ super() }}

{% if article.description %}
  <meta name="description" content="{{article.summary}}" />
{% endif %}

<link rel="stylesheet" href="/theme/css/article.css">

<script src="/theme/js/pathways.js"></script>

{% if article.category == 'visuals' %}
  <link rel="stylesheet" href="/theme/css/visuals.css">
  <!-- <script src="/theme/js/visuals.js"></script> -->
{% endif %}

{% if article.slug == 'worksessions-gallery' %}
  <link rel="stylesheet" href="/theme/css/visuals.css">
  <!-- <script src="/theme/js/visuals.js"></script> -->
{% endif %}

{% if article.slug == 'apple-soup' %}
  <link rel="stylesheet" href="/theme/css/visuals.css">
  <!-- <script src="/theme/js/visuals.js"></script> -->
{% endif %}

{% if article.category == 'roots' %}
  <link rel="stylesheet" href="/theme/css/roots.css">
{% endif %}

<script src="/theme/js/article-utilities.js"></script>

{% endblock %}

{% block body %}
  {{ super() }}

<section id="side-interface">
  <div class="article-cart-wrapper">
  <header class="article-cart {{ article.category }}">

    <details open>
      <summary>
        {% if article.category %}
        <div class="{{ article.category }} category">
          {{ article.category }}
        </div>
        {% endif %}
        <h2>{{ article.title }}</h2>
        <address class="author">By {{ article.authors|join(', ') }}</address>
      </summary>

      <main>
        {% if article.category == 'roots' %}
        {% for p in pages %}
          {% if p.title == "definition short" %}
            {{ p.content }}
          {% endif %}
        {% endfor %}
        <ul class="link-list">
        {% for c in categories %}
          {% if c[0] == "roots" %}
            {% for a in c[1] %}
                <li><a href="/{{ a.url }}">{{ a.title }}</a></li>
            {% endfor %}
          {% endif %}
        {% endfor %}
        <ul>
        {% else %}
          {{ article.summary }}
        {% endif %}
      </main>
    </details>

    {% if article.license %}
      <p class="licenses">
        {% set FAL = "All images & text under <a href='https://en.wikipedia.org/wiki/Free_Art_License' target='_blank'>Free Art License (FAL)</a>" %}
        {% if article.license is string %}
          {{ article.license | replace("fal", FAL) }}
        {% else %}
          {% for license_line in article.license %}
            {{ license_line | replace("fal", FAL) }}
            {% if not loop.last %}
              <br>
            {% endif %}
          {% endfor %}
        {% endif %}
      </p>
    {% endif %}

  </header>
  </div>
  {% if article.sourcecode %}
    <a href="{{ article.sourcecode }}" target="_blank">Explore sourcecode on gitlab.constantvzw.org</a>
  {% endif %}
</section>

<main id="top">
  <article id="{{ article.slug }}" class="{{ article.category }}">

        {% if article.category == 'interviews' %}
        <section class="introduction">
          {% for p in pages %}
            {% if p.title == "Interviews introduction" %}
              {{ p.content }}
            {% endif %}
          {% endfor %}
        <ul class="link-list">
        {% for c in categories %}
          {% if c[0] == "interviews" %}
            {% for a in c[1] %}
                <li><a href="/{{ a.url }}">{{ a.title }}</a></li>
            {% endfor %}
          {% endif %}
        {% endfor %}
        <ul>
      </section>
      {% endif %}

      {{ article.content }}

      {% block extra_article_content %}{% endblock %}

  </article>

</main>

<script src="/theme/js/code-project-fullscreen.js"></script>

<section id="side-space">
</section>

<nav class="button-nav" id="nav-left">
  <a class="vines-button" href="/">entrance</a>
</nav>

<nav class="button-nav" id="nav-right">
  <a id="to-top" href="#">&#x2191;</a>
  <a class="vines-button" href="/map.html">Points of interest</a>
</nav>

{% endblock body %}